import React, {Component} from 'react';
import './Message.css';
import CommentList from './components/CommentList'
import CommentBox from './components/CommentBox'
import Context from '../../context'
import { Button } from 'element-react'

const themes = {
    light: {
        classnames: 'comment-li-blue',
        bgColor: '#eeeeee',
        color: '#000'
    },
    dark: {
        classnames: 'comment-li-yellow',
        bgColor: '#222222',
        color: '#fff'
    },
};

class Message extends Component{
    constructor (props) {
        super(props);
        this.state = {
            comments: ['this is my first reply'],
            theme: 'light'
        }
    }
    addComment (value) {
        this.setState({
            comments: [value, ...this.state.comments]
        })
    }
    delList (key) {
        this.setState({
            comments: this.state.comments.filter((item,index) => { return  index !== key})
        })
    }
    changeTheme (type) {
        this.setState({
            theme: type
        })
    }
    render () {
        return (
            <Context.Provider value={themes[this.state.theme]}>
            <div className="message">
                <CommentList comments={this.state.comments} onDelList={this.delList.bind(this)}/>
                <CommentBox onAddComment={this.addComment.bind(this)} />
                <div className='context-text-btn'>
                    <Button type='primary' onClick={this.changeTheme.bind(this,'light')}>浅色主题</Button>
                    <Button type='primary' onClick={this.changeTheme.bind(this,'dark')}>深色主题</Button>
                </div>

            </div>
            </Context.Provider>
        )
    }
}

export default Message
